<template>
  <router-view v-slot="{ Component, route }">
    <!-- <transition :name="(transitionName ?? route.meta.transition) || 'scale'"> -->
      <component :is="Component" />
    <!-- </transition> -->
  </router-view>
</template>
<script setup>
defineProps(["transitionName"]);
</script>
<style lang="scss" scoped>
// transitions
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

// slide系列
.slide-enter-active,
.slide-leave-active {
  transition: all 0.75s cubic-bezier(0.5, 1.75, 0.75, 1.25);
}
.slide-enter-to,
.slide-leave-to,
.slide-leave-from,
.slide-enter-from {
  position: absolute;
  width: 100%;
}
.slide-enter-to {
  bottom: 0;
}
.slide-enter-from {
  bottom: -100%;
}
.slide-leave-to {
  top: -100%;
}
.slide-leave-from {
  top: 0;
}

// scale transition!
.scale-enter-active,
.scale-leave-active {
  width: 100%;
  transition: all 0.5s ease;
  // transition: all 0.5s cubic-bezier(.5, -.1, .1, 1.5);
  // transition: all 0.5s cubic-bezier(1, 0, 1, 1);
  // transition: all 0.5s cubic-bezier(.5, 1.75, .75, 1.25);
}

.scale-enter-from,
.scale-leave-to {
  opacity: 0;
  transform: scale(0.8);
}
.scale-leave-to {
  transform: scale(0.3);
}

// scaleSlide
.scale-slide-enter-active,
.scale-slide-leave-active {
  position: absolute;
  width: 100%;
  transition: transform 0.5s ease, top 0.5s ease;
}

.scale-slide-enter-from {
  top: -100%;
}

.scale-slide-enter-to {
  top: 0%;
}

.scale-slide-leave-from {
  transform: scale(1);
  top: 0;
}

.scale-slide-leave-to {
  transform: scale(0.8);
  top: 100vh;
}
</style>
